<template>
  <div class="indicators">
    <div class="title">已办理服务数据</div>
    <NumberCard class="number-card" title="高层次人才服务" percentage="" :rose="true" number="04630" color="#2b94ef"></NumberCard>
    <NumberCard class="number-card" title="大学生服务/件" percentage="" :rose="true" number="64063" color="#00f8ff"></NumberCard>
    <NumberCard class="number-card" title="其他服务/件" percentage="" :rose="false" number="00075" color="#fcd224"></NumberCard>
  </div>
</template>

<script>
import NumberCard from "@/components/NumberItem/NumberCard.vue";

export default {
  name: "Indicators2",
  components: {NumberCard},

}
</script>

<style scoped lang="scss">
.indicators {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  .title {
    width: 100%;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
    display: flex;
    justify-content: center;
  }
  .number-card{
    width: calc(50% - 10px);
    padding: 20px 0;
    flex-grow: 0;
  }
  .number-card:nth-child(2n){
    margin-right: 20px;
  }
}
</style>
